<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博文草稿箱</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_drafts.css">

</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>

    <a href="blog_lists.html">博客广场</a>
    <a href="blog_list.html">个人主页</a>

    <!-- 此标签用于占位 分隔 -->
    <div class="spacer"></div>


    <!-- 浏览页有写博客和注销 -->
    <a href="blog_edit.html">写博客</a>
    <!-- 跳转到对应后台 实现删除 会话里的值 -->
    <!--    <a href="user/logout">注销</a>-->
    <!--    单击执行 logout方法-->
    <a href="javascript:logout()">注销</a>
</div>

<!-- 页面主体 -->
<div class="container">
    <!-- 左侧信息 其他页面可以复用-->
    <div class="container-left">

        <!-- .card 盒子 表示用户信息 -->
        <div class="card">
            <img src="" alt="">
            <!-- <h3>筱</h3> -->
            <!-- 根据用户 设定用户名 -->
            <h3></h3>


            <div class="counter">
                <span>文章数</span>
                <span>获赞数</span>
            </div>

            <div class="counter">
                <!-- <span>2</span> -->
                <span class="count"> </span>
                <span class="likedcount"></span>
            </div>
        </div>

    </div>


    <div class="container-right">
        <!-- 博客指示信息 -->
        <div class="message"> 草稿箱为空~ 快去个人主页编辑你的文章吧!
        </div>
        <!-- 列表页右侧信息:此列表页专属结构 -->
        <!-- 博文描述界面 -->

        <!-- 表示一篇博客  先用作样式 -->
        <!-- <div class="blog"> -->

        <!-- 博客标题 -->
        <!-- <div class="title">
            我的第一篇博客
        </div> -->
        <!-- 发布时间 -->
        <!-- <div class="date">
            2023-8-4
        </div> -->
        <!-- 博客摘要 -->
        <!-- <div class="desc">
            从今天起,我要认真敲代码!!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet aliquam optio iure asperiores placeat corporis molestiae velit fuga, voluptatum perspiciatis repudiandae aperiam possimus. Dolores exercitationem fuga voluptatem! Rem, ipsa quod.
        </div> -->
        <!-- 查看全文按钮 用链接表示 >用&gt转义字符 -->
        <!-- <a href="#">查看全文 &gt;&gt;</a> -->
        <!-- </div> -->


    </div>
    <!-- 引入jquery源码 -->
    <script src="js/jquery.js"></script>
    <!-- 向后端发起请求获取全部博文josn对象 -->
    <script>
        // 此处获取个人所写的博客
        function getBlogs() {

            let rel = 1;
            let bodydiv = document.querySelector('.container-right');
            let mes = document.querySelector('.message');
            $.ajax({
                type: 'post',
                url: '/article/showuserarticles',
                data: {"state" : 2},
                success: function (body) {
                    // data里是json数组对象接受的是ajax解析的服务器发送过来的josn数组字符串
                    if (body != null && body.code == 200) {
                        for (let blog of body.data) {
                            // 采取document 动态创建元素 向内部填充数据 再填充到 博文容器 渲染到页面上
                            //也可以采取 字符串拼接形式 拼接 div 等元素将内容填充 最后使用jquery方式 使博文容器内填充 字符串转换的html内容
                            // 创建一个blog 盒子 应用设置好的blog类标签
                            let blogDiv = document.createElement('div');
                            blogDiv.className = 'blog';

                            //创建 标题对象
                            let titleDiv = document.createElement('div');
                            titleDiv.className = 'title';
                            titleDiv.innerHTML = blog.title;
                            blogDiv.appendChild(titleDiv);

                            //创建日期对象
                            let dateDiv = document.createElement('div');
                            dateDiv.className = 'date';
                            dateDiv.innerHTML = blog.updatetime;

                            blogDiv.appendChild(dateDiv);

                            //创建 正文 对象
                            let descDiv = document.createElement('div');
                            descDiv.className = 'desc';
                            descDiv.innerHTML = blog.description;
                            let  description = document.createElement('div');
                            description.appendChild(descDiv)
                            description.className='description';
                            blogDiv.appendChild(description);

                            //创建 超链接作
                            let a = document.createElement('a');
                            //  访问详情页时带上当前博文标签
                            a.href = "blog_drafts_modify.html?id=" + blog.id;
                            a.innerHTML = '编辑文章&gt;&gt;';
                            blogDiv.appendChild(a);

                            let del =document.createElement('button');
                            del.innerHTML = "删除文章&gt;&gt;";
                            del.className='del'
                            blogDiv.appendChild(del);
                            del.onclick =function (){

                                if(confirm("您确定要删除这篇草稿嘛?")){
                                    $.ajax({
                                        url:"/article/del",
                                        type:"post",
                                        data:{"id":blog.id,
                                            "state":2},
                                        success: function (body){
                                            if(body!=null&&body.data!=null&&body.data!=0){
                                                alert("此篇草稿删除成功!");
                                                location.assign("blog_drafts.html")
                                            }else{
                                                alert("此篇草稿删除失败");
                                                location.assign("blog_list.html");
                                            }
                                        }
                                    });
                                }
                            }
                            // 将构造好的博客 添加到 博客容器里
                            let blogContainer = document.querySelector('.container-right');
                            blogContainer.appendChild(blogDiv);

                            // 当发布博客之后将指示信息删除
                            if (rel == 1) {
                                bodydiv.removeChild(mes);
                                rel = 0;
                            }

                        }
                    } else {
                        alert("操作异常:" + body.msg);
                        location.assign('blog_login.html');
                    }


                }
            });


        }

        let getLogin = function () {
            // 获取 个人信息
            $.ajax({
                type: 'get',
                url: '/user/showuser',
                success: function (body) {
                    // 状态码为200 且有数据 即获取到了个人信息
                    if (body != null && body.code == 200 && body.data != null) {
                        let profile=document.querySelector('.card img');
                        profile.src=body.data.photo;
                        let username = document.querySelector('.card h3');
                        username.innerHTML = body.data.username;
                        let count = document.querySelector('.counter .count');
                        count.innerHTML = body.data.blogCount;
                        let likedcount = document.querySelector('.likedcount');
                        likedcount.innerHTML = body.data.liked;
                    } else {
                        alert("操作异常:" + body.msg);
                        location.assign('blog_login.html');
                    }
                }
            });

        };


        getLogin();

        getBlogs();

        function logout() {
            if (confirm("您确定要退出登录嘛?")) {
                $.ajax({
                    url: "/user/logout",
                    type: "post",
                    data: {},
                    success: function (rel) {
                        if (rel.code == 200) {
                            alert("Bye~");
                            location.assign("blog_login.html");
                        }
                    }
                });
            }
        }
    </script>
</div>
</body>
</html>